<template>
	<view>
		<view class="wrap">
			<u-navbar :is-back="false" :background="background" title-color="#ffffff"  :immersive="true"   titleWidth="350">
				<view class="menu">
					<!-- <i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i> -->
					<image src="/static//index/menu.png" mode="widthFix" lazy-load @tap.stop="shownavs"></image>
				</view>
				<view class="menu-right" slot="right">
					{{address_l || '-'}}
				</view>
			</u-navbar>
			<!-- <view class="page-box-2-title page-box-2-title-other-class" @tap.stop="dorShow=!dorShow">
				<text>{{cw_title || ''}}</text>
				<i class="icon iconfont icon-xialasanjiao "></i>
				<view class="popule-cw" v-if="dorShow">
					<scroll-view scroll-y="true" style="height: 400rpx;">
						<block v-for="(item,index) in cwList">
							<view class="popule-cw-li" @tap.stop="changeDropdown(index)">
								{{item.label}}
							</view>
						</block>
					</scroll-view>
			
			
				</view>
			
			
			</view> -->
			
			<view class="polymeric-nav" :style="{width:cwList.length*134+'rpx'}">
				<block v-for="(item,index) in cwList" :key="index">
					<view class="polymeric-nav-item" :class="{'active':navindex==index}"  @tap.stop="changeDropdown(index)">
						{{item.label}}
					</view>
				</block>
				
			</view>
			
			
			<view class="polymeric-contant">
				<view class="polymeric-contant-c">
					<view class="polymeric-history" @tap.stop="getHistoryt">
						
						抢单记录
					</view>
					<view class="polymeric-top">
						<!-- <image src="../../static/image/Countdown-bg.png" mode="" class="polymeric-top-bg" lazy-load></image> -->
						<!-- {{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}} -->
						<view class="polymeric-top-t-tips">
							距离下一场抢购还有
						</view>
						<view class="polymeric-top-t">
							<view class="polymeric-top-t-l">
								<image src="../../static/image/time-bg.png" mode="widthFix" lazy-load></image>
								
								<text>{{hour? hourString:'00'}}</text>
							</view>
							<view class="polymeric-top-t-ll">:</view>
							<view class="polymeric-top-t-l">
								<image src="../../static/image/time-bg.png" mode="widthFix" lazy-load></image>
								
								<text>{{minuteString?minuteString:'00'}}</text>
							</view>
							<view class="polymeric-top-t-ll">:</view>
							<view class="polymeric-top-t-l">
								<image src="../../static/image/time-bg.png" mode="widthFix" lazy-load></image>
								
								<text>{{secondString?secondString:'00'}}</text>
							</view>
						</view>
						
						
						<view class="incubation-list">
							<block v-for="(item,index) in warehouseList" :key="index">
								<view class="incubation-list-i" @tap.stop="getCurInfo(item)" >
									<!-- <image src="../../static/image/incubation-list-0.png" mode="" class="incubation-list-i-bg"></image> -->
									<view class="incubation-list-i-content">
										<view class="incubation-list-i-content-t">
										<view>{{item.title}}</view>
											<text>{{`剩余${item.syparams}%`}}</text>
										</view>
										<view class="incubation-list-i-content-c">
						<!-- 	<view class="incubation-list-i-content-c-bg-img">
								
							</view>	 -->			
											
											<!-- <view class="incubation-list-i-content-c-tips" v-if="item.status==1"> -->
											<!-- 	<view class="incubation-list-i-content-c-tips"
												:class="[item.status==1?`color1`:item.status>=2?'color2':'color2']"
												>
												{{item.status==1?`抢购中`:item.status>=2?'抢购结束':'未开启'}}
											</view> -->
											<view class="incubation-list-i-content-c-l">
												<!-- <image src="../../static/image/hot-bg-0.png" mode="" :style="{left:(Number(item.params)<95?(Number(item.params)-4):95)+'%'}" v-if="item.status==1"></image>
												<image src="../../static/image/hot-bg-1.png" mode="" :style="{left:(Number(item.params)<95?(Number(item.params)-4):95)+'%'}" v-else></image> -->
												<u-line-progress :percent="item.params" :showPercent="false" inactiveColor="#363D48" activeColor="#F5C249"></u-line-progress>
											</view>
											<!-- <text>{{item.status==1?`已抢${item.params}%`:''}}</text> -->
										</view>
									</view>
									
									<view class="list-status">
										{{item.status==1?`抢购中`:item.status>=2?'抢购结束':'未开启'}}
									</view>
									
								</view>
							</block>
						</view>
						<view class="polymeric-top-bottom">
							<button @tap.stop="getDoving">
								预约
								<!-- 一键抢购 -->
							</button>
							<!-- <button @tap.stop="ReserveFunction">
								一键预约
								<image src="../../static/image/button-blue.png" mode=""></image>
							</button> -->
						</view>
						
					</view>
					
					
					
					
					
				</view>
				
				
				<image src="../../static/index/polymeric-bg.png" mode="widthFix" class="polymeric-bg"></image>
			</view>
			
			
			
			
			
			
			
			
			
			<view class="popule-index-content-msg" v-if="ReserveShow" @tap.stop="ReserveShow=!ReserveShow">
				<view class="popule-index-content-msg-content" @tap.stop="''">
					<view class="popule-index-content">
						<view class="clost-icon" @tap.stop="ReserveFunction">
							<i class="icon iconfont iconcha"></i>
						</view>
						<!-- <view class="popule-text-conent">
							预约开始时间:{{curInfo.start_time || ''}}
						</view> -->
						<view class="popule-index-content-c">
							<view class="popule-index-content-c-l">总预约数量： <text>{{curInfo.yy_all_num || 0}} USDT</text>
								
							</view>
							<view class="popule-index-content-c-l">剩余预约数量： <text>{{curInfo.yy_sy_num || 0}} USDT</text>
								
							</view>
							<view class="popule-index-content-c-l">账户可用余额： <text>{{jd_balance || 0}} USDT</text>
								
							</view>
						</view>
						<view class="popule-percent">
							<view class="popule-percent-l">
							<u-line-progress :percent="curInfo.params" :showPercent="false" inactiveColor="#E7EAF4" activeColor="#2952F5"></u-line-progress>	
							</view>
							<text>{{curInfo.params || 0}}%</text>
						</view>
						
						<view class="popule-input-item">
							<view class="popule-input-item-t">
							预约数量	
							</view>
							<view class="popule-input-item-c"><input type="number"v-model="numb" :placeholder="`可预约数量不能超过${curInfo.qgs}`"  placeholder-style="color:#B7BBC7;font-size:26rpx">
								
							</view>
							<!-- "@input="inputNumbettt -->
							
						</view>
						<view class="popule-botton">
							<button @tap.stop="comfirmEnter">确认预约</button>
						</view>
						
					</view>
				</view>
				
			</view>
			
			
			
			
			<view class="popule-index-content-msg" v-if="showpopule">
				<view class="popule-index-content-msg-content">
					<view class="popule-index-content">
						<!-- <view class="popule-index-content-t">{{curInfo.title}}</view> -->
						<view class="clost-icon" @tap.stop="showpopule=!showpopule">
							<image src="../../static/cha.png" mode="widthFix" lazy-load></image>
						</view>
						<view class="popule-index-content-c">
							<!-- <view class="popule-index-content-c-l">可抢购数量： <text>{{(cutNum | formatParsefloat) || 0}} USDT</text>
								
							</view> -->
							<view class="popule-index-content-c-ll">
								{{curInfo.title}}
							</view>
							
							<view class="popule-index-content-c-l">
								当前期最大投入值： <text>{{(curInfo.qgs || '') || 0}} USDT</text>
							</view>
							<!-- <view class="popule-index-content-c-l">
								单次最大抢购数量： <text>{{(curInfo.max_qg || '') || 0}} USDT</text>
							</view> -->
							<view class="popule-index-content-c-l">USDT可用余额： <text>{{jd_balance | formatParsefloat}} USDT</text>
								
							</view>
							
							
							<view class="popule-index-content-c-l">剩余抢购数量： <text>{{curInfo.qg_sy_num || 0}} USDT</text>
								
							</view>
						</view>
						<view class="popule-input-item">
							<view class="popule-input-item-t">
							抢购数量	
							</view>
							<view class="popule-input-item-c"><input type="number"v-model="num" placeholder="请输入您要抢购的数量"  placeholder-style="color:#8A8A8A;font-size:26rpx">
								
							</view>
							
							
						</view>
						<view class="popule-botton">
							<button @tap.stop="comfirm(0)">立即抢购</button>
						</view>
						
					</view>
				</view>
				
			</view>
			<image src="../../static/image/Polymeric-bg.png" mode="widthFix" lazy-load class="assets-top"></image>
			
		</view>
		<pay-pwd :maxlength="6" :isPwd="true" :isSHow="showpwd" :isShows="isshows" :isShowss="showss" @close="close"
			@input-again="inputAgain" @finish="finish"></pay-pwd>
		<u-top-tips ref="message" :type="types" zIndex="999" :navbar-height="statusBarHeight + navbarHeight">
		</u-top-tips>
		<message
		:shows="showMess" 
		:message="message"
		@jump="closeMesst"
		rightText="设置"
		@close="closeMess"></message>
		
		
		
		<message
		:shows="showMesst" 
		:message="message"
		@jump="closeMessc"
		rightText="设置"
		@close="closeMess"></message>
		
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/menu/logo.png" mode="widthFix" lazy-load></image>
				</view>
				
				<view class="nav-address">
					{{address_l || '-'}}
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="clickBullentin">
					<view class="nav-item-l">
						<image src="../../static/menu/ce-0.png" mode="widthFix"></image>首页
					</view>
					<i class="icon iconfont icon-xiayibu"></i>
					</view>
				
				<!-- <view class="nav-item active" hover-class="hover-transform1" @tap.stop="getQz(0)">
				<view class="nav-item-l">	
					<image src="../../static/menu/ce-1-1.png" mode="widthFix"></image>抢单</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(5)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-2.png" mode="widthFix"></image>质押</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
					
					<!-- <view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(6)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-3.png" mode="widthFix"></image>兑换</view>
						<i class="icon iconfont icon-xiayibu"></i></view> -->
						
						
						<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(4)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-4.png" mode="widthFix"></image>团队</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
						
						
					
			<!-- 	<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><view class="nav-item-l"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
				
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(1)"><view class="nav-item-l"><image src="../../static/menu/ce-5.png" mode="widthFix"></image>我的</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(89)"><view class="nav-item-l"><image src="../../static/menu/ce-6.png" mode="widthFix"></image>公告</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import Message from '@/components/common/message.vue';
	import {
		pageto,
		showToast,
		fetch,
		updownLine,
		forceUpdate,
		diff_txt,
		_updataTabBar
	} from '@/common/js/util.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		components:{Message},
		data() {
			return {
				refer:'',
				showPopuleAver:false,
				showNav:false,
				ReserveShow:false,
				showMess:false,
				message:'',
				background: '#21242D',
				list: [
					{
						name: '聚合列表'
					},
					{
						name: '预约'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				curms: {},
				alist: [],
				total: '',
				page: 1,
				historyList: [],
				cw: '',
				cwList: [],
				cw_title: '',
				value1: '',
				dorShow: false,
				warehouseList: [],
				jd_balance: '',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				types: '',
				showpwd: false,
				showss: false,
				showpopule: false,
				isshows: false,
				curInfo: [],
				num: 1,
				yyInfo: {},
				isPolymerization: false,
				numb: "",
				noMore: false,
				tabList: [],
				ljjl: '',
				isCheck: false,
				typeIndex: 0,
				yyc_balance:'',
				showMesst:false,
				PanicBuyingShow:false,
				rq:'',
				hour: '',
				minute: '',
				second: '',
				timer: '',
				shopid:'',
				djs_status:false,
				cyrs:'',
				isBind:false,
				address_l:'',
				navindex:0
				
			};
		},
		onLoad() {
			// this.getOrderList(0);
			// this.getOrderList(1);
			// this.getOrderList(3);
		},
		onShow() {
			this.isBind =this.getIsBind;
			this.djs_status = false
			this.PanicBuyingShow = false;
			this.ReserveShow = false;
			this.showMesst = false
			this.showMess = false;
			this.yyc_balance = ''
			this.typeIndex = 0
			this.isCheck = false;
			// this.numb = ''
			this.isPolymerization = false;
			this.dorShow = false;
			// this.current=0
			// this.swiperCurrent=0
			this.total = ''
			this.curms = {}
			this.alist = []
			this.getList()
			this.showpwd = false;
			this.showss = false;
			this.showpopule = false;
			this.noMore = false
			this.getCang()
			this.address_l = this.phoneNumShow(this.getLoginInfo.address)


		},
		onHide(){
			clearInterval(this.timer)
			this.timer=null;
			this.timer=''
		},
		onUnload(){
			clearInterval(this.timer)
			this.timer=null;
			this.timer=''
		},
		computed: {
			hourString () {
				return this.formatNum(this.hour)
			},
			  minuteString () {
				return this.formatNum(this.minute)
			  },
			  secondString () {
				return this.formatNum(this.second)
			  },
			formatParsefloat(val) {
				if ((!val && val != 0) || val == null || val == undefined || val == 'undefined') {
					return 0
				}
				return parseFloat(val)
			},
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '0';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			},
			cutNum(){
				// console.log(Number(this.curInfo.max_qg) < Number(this.curInfo.qg_sy_num),'我自爱这里');
				if (Number(this.curInfo.max_qg) < Number(this.curInfo.qg_sy_num)) {
						return Number(this.curInfo.max_qg)
				}
				return  Number(this.curInfo.qg_sy_num)
			},
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType', //
				'getLogin',
				'getLoginInfo',
				'getTextArr', //,
				'getUserList',
				'getIsLogin',
				'getIsBind'
			])
		},
		methods: {
			phoneNumShow (info) {
				// let that = this;
				let number = info; //获取到手机号码字段
				let mphone = number.substring(0, 4) + '****' + number.substring(info.length-5,info.length);
				// that.tel = mphone
				return mphone
			},
			...mapMutations(['setIsBind']),
			async buyRefer(){
				
				this.showPopule = false;
				// this.showPopule1 = true;
				
				await fetch('/api/user/referBind',{address:this.getLoginInfo.address,refer:this.refer},'post').then(res=>{
					this.showPopuleAver = false;
					this.refer=''
					this.showTips(res.data.msg,'error')
					if(res.data.code==1){
						// this.getUser()
						this.setIsBind(true)
						this.showTips(res.data.msg,'success')
						// this.indexInfo = res.data.data
					}else if(res.data.code==0){
						setTimeout(()=>{
							this.showPopuleAver = true;
						},1000)
					}
				})
			},
			shownavs(){
				// console.log('q3eq2',this.showNav);
				this.showNav =true
			},
			clickBullentin() {
				clearInterval(this.timer)
				this.timer=null;
				this.timer=''
				uni.reLaunch({
					url:'../index/index'
				})
			},
			getQz(index){
				this.showNav=false
				if(index==1){
					clearInterval(this.timer)
					this.timer=null;
					this.timer=''
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==6){
					uni.reLaunch({
						url:'/pages/exchange/exchange'
					})
					return
				}else if(index==4){
					uni.reLaunch({
						url:'/pages/team/team'
					})
					return
				}else if(index==5){
					uni.reLaunch({
						url:'/pages/wealth-treasure/wealth-treasure'
					})
					return
				}else if(index==3){
					
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}else if(index==89){
					uni.reLaunch({
						url:"/pages/new/notice"
					})
					return
				}
				clearInterval(this.timer)
				this.timer=null;
				this.timer=''
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
				// if(this.indexInfo.bps){
				// 	// #ifdef APP-PLUS
				// 	setTimeout(()=>{
				// 		plus.runtime.openURL(this.indexInfo.bps);
				// 	}, 500)	
				// 	// #endif
				// 	// #ifdef H5 
				// 	window.location.href=this.indexInfo.bps
				// 	// #endif
				// }
			},
			getDoving(){
				
				let item = this.warehouseList[0]
				console.log(item);
				if(item.status>=2 || (item.status==0 && !this.djs_status)){
					this.showTips('暂未开启', 'error');
					return
				}
				if(item.status==0 && this.djs_status){
					this.ReserveShow =true
					this.curInfo = item;
					this.numb = this.curInfo.qgs
					return
				}
				this.showTips('暂未开启预约', 'error');return;
				console.log(item,'item')
				return
				// if(item.status==0 || !this.djs_status)
				
				if(!this.getIsBind){
					this.showPopuleAver = true
					return 
				}
				this.curInfo = item;
				
				this.num = item.qgs
				this.showpopule = true;
				this.isPolymerization = true;
				return;
			},
			async comfirmEnter(){
				if(this.numb>this.curInfo.qgs){
					this.showTips('可预约数量不能超过'+this.curInfo.qgs, 'error');return;
					return
				}
				
				
				this.yyInfo = {}
				await fetch('/api/shop/spoc_yy', {shopid:this.shopid,zf_type:Number(this.typeIndex)+1,num:this.numb}, 'post').then(res => {
					if (res.data.code == 1) {
						this.yyInfo = res.data.data
						
						if(this.yyInfo.yy_status==0){
							this.ReserveShow=false;
							this.numb=''
							this.showpopule = false
							// this.showTips(res.data.msg, 'success');return
							this.showTips('暂未开启预约', 'error');return;
							
							return 
						}else{
							this.showTips(res.data.msg, 'success');
							this.comfirm(1)
						}
						
					}else{
						this.showTips(res.data.msg, 'error');
					}
				})
			},
			 countDowm () {
			        var self = this
			        clearInterval(self.timer)
			        self.timer = setInterval(function () {
						// console.log(self.hour,self.minute,self.second,'123123');
			          if (self.hour === 0) {
			            if (self.minute !== 0 && self.second === 0) {
			              self.second = 59
			              self.minute -= 1
			            } else if (self.minute === 0 && self.second === 0) {
			              self.second = '0'
						  self.minute = '0'
						  self.hour = '0'
						  clearInterval(self.timer)
						  self.getSpocList()
			              
			            } else {
			              self.second -= 1
			            }
			          } else {
			            if (self.minute !== 0 && self.second === 0) {
			              self.second = 59
			              self.minute -= 1
			            } else if (self.minute === 0 && self.second === 0) {
							
			              self.hour -= 1
			              self.minute = 59
			              self.second = 59
			            } else {
			              self.second -= 1
			            }
			          }
			        }, 1000)
			      },
			      formatNum (num) {
					  if(num==0)return '00'
			        return num < 10 ? '0' + num : '' + num
			      },
			inputNumbettt(e){
				// console.log(Number(this.yyInfo.max),Number(this.yyInfo.min));
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				setTimeout(()=>{
					if(Number(e.detail.value)>Number(this.yyInfo.max)){
						// console.log(21342134234);
						this.$nextTick(() => {
						this.numb=Number(this.yyInfo.max)?Number(this.yyInfo.max):1
						})
						return
					}
					if(Number(this.yyInfo.balance)<Number(e.detail.value)){
							// console.log(13213);
							this.$nextTick(() => {
							this.numb=Number(this.yyInfo.balance)?Number(this.yyInfo.balance):1
							})
							
							return
					}else if(Number(this.yyInfo.balance)>=Number(e.detail.value)>=Number(this.yyInfo.max)){
							
							this.$nextTick(() => {
							this.numb=Number(this.yyInfo.max)
							})
						// console.log('我大于');
						// this.num=Number(this.yyInfo.max)
						return
					}else{
						if(Number(e.detail.value)<Number(this.yyInfo.min)){
								
								this.$nextTick(() => {
								this.numb=Number(this.yyInfo.min)?Number(this.yyInfo.min):1
								})
						}
					}
				},50)
				
				
				
				
				
				// if(e.)
			},
			ReserveFunction(){
				this.getYyInfo()
				
				// console.log(this.yyInfo,'12312');
				
				
				this.ReserveShow = !this.ReserveShow
			},
			PanicBuyingFunction(){
				this.PanicBuyingShow = !this.PanicBuyingShow
			},
			getReguite(){
				this.showTips('暂未开启', 'error');return;
				uni.navigateTo({
					url:'/pages/index/recharge'
				})
			},
			getCoin(){
				this.showTips('暂未开启', 'error');return;
				// return
				// if(this.curms.yhk_status==0){
				// 	this.showMesst = true;
					
				// 	this.showMess = false;
				// 	this.showpopule = false
				// 	this.message = this.getLangType=='chs'?'用户未设置银行卡信息':'用户未设置银行卡信息'
				// 	return
				// }
				
				uni.navigateTo({
					url:'/pages/index/coin'
				})
			},
			closeMess (){
				this.showMess = false
				this.showMesst = false
			},
			closeMesst(){
				this.showMess = false
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/setting/setting-pay-pass"
					})
				},500)
			},
			closeMessc(){
				this.showMess = false
				this.showMesst = false
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/mine/bind-bank"
					})
				},500)
			},
			chooseType(index){
				this.typeIndex = index
			},
			getBili(item) {
				pageto(`/pages/bill/bili?type=${item.type}`);
			},
			inputNumber: function(e) {
				// console.log(e);

				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				setTimeout(()=>{
					if(Number(this.curInfo.max_qg) <= Number(this.curInfo.qg_sy_num)){
						console.log(11);
						if(Number(this.num)>Number(this.curInfo.max_qg) && Number(this.num)<Number(this.jd_balance)){
							// console.log(22222);
							this.$nextTick(() => {
							this.num=Number(this.curInfo.max_qg)
							})
							return
						}else if(Number(this.num)<=Number(this.curInfo.max_qg) && Number(this.num)>Number(this.jd_balance)){
							// console.log(1213);
							this.$nextTick(() => {
							this.num=Number(this.jd_balance)
							})
							return
							
						}else{
							// console.log(3333);
							this.num=e.target.value
						}
						
						
						
						
						
					
					}else{
						
						if(Number(this.num)>Number(this.curInfo.qg_sy_num) && Number(this.num)<Number(this.jd_balance)){
							// console.log(22222);
							this.$nextTick(() => {
							this.num=Number(this.curInfo.qg_sy_num)
							})
							return
						}else if(Number(this.num)<=Number(this.curInfo.qg_sy_num) && Number(this.num)>Number(this.jd_balance)){
							// console.log(1213);
							this.$nextTick(() => {
							this.num=Number(this.jd_balance)
							})
							return
							
						}else{
							// console.log(3333);
							this.num=e.target.value
						}	
					}
				},50)
				
			},
			closet() {
				this.showpopule = false;
			},
			async getYyInfo() {
				this.yyInfo = {}
				await fetch('/api/shop/yyinfo', {shopid:this.shopid}, 'post').then(res => {
					if (res.data.code == 1) {
						this.yyInfo = res.data.data
						this.yyInfo.params = Number((Number(this.yyInfo.yyed_yyy )/Number(this.yyInfo.yyed_all)*100).toFixed(2)<100)?(Number(this.yyInfo.yyed_yyy )/Number(this.yyInfo.yyed_all)*100):100
						
						
					this.yyInfo.syparams = Number((Number(this.yyInfo.yyed_all)-Number(this.yyInfo.yyed_yyy ))/Number(this.yyInfo.yyed_all)*100).toFixed(2)		
					
					
						
						// console.log(this.yyInfo,'this.yyInfo');
						// this.getYjList()
					}
				})
			},
			async getYjList() {
				await fetch('/api/shop/spoc_buylist', {
					page: this.page,
					rows: 10
				}, 'post').then(res => {
					if (res.data.code = 1) {
						// console.log('我zasd');
						if (res.data.data.list.length == 0) return;
						// console.log('我宰这里');
						this.noMore = false;
						if (res.data.data.list.length < 10) {
							this.noMore = true;
						}
						if (this.page == 1) {
							this.historyList = res.data.data.list
						} else {
							this.historyList = this.historyList.concat(res.data.data.list)
						}
						
						// console.log(this.historyList);
						this.page++
					}
					

				})
			},
			getHistoryt(){
				console.log(11);
				uni.navigateTo({
					url:'./history'
				})
			},
			less() {
				if (this.num > 1) {
					this.num--;
					return
				}
				this.num = 1
			},
			add() {
				if (Number(this.curInfo.max_qg) < Number(this.curInfo.qg_sy_num)) {
					if (Number(this.num) < Number(this.curInfo.max_qg)) {
						this.num++  
					}
				} else {
					if (Number(this.num) < Number(this.curInfo.qg_sy_num)) {
						this.num++
					}
				}


			},
			getCurInfo(item) {
				if(item.status>=2 || item.status==0)return
				this.curInfo = item;
				this.num = item.qgs
				this.showpopule = true;
				this.isPolymerization = true;
			},
			changeDropdown(e) {
				this.navindex = e
				this.dorShow = false;
				// console.log(this.cwList, e, this.cwList[Number(e)].title);
				this.cw_title = this.cwList[Number(e)].title;
				this.cw = this.cwList[Number(e)].id;
				// cw_title = :'',
				// value1:''
				// console.log(e);
				this.numb=''
				this.num=''
				clearInterval(this.timer)
				this.getSpocList()
			},
			async getCang() {
				this.cwList = []
				
				// this.warehouseList = [
				// 	{
				// 		params:10,
				// 		title:'title',
				// 		status:1,
						
				// 	}
				// ];
				// return
				
				await fetch('/api/shop/cwlist', {}, 'post').then(res => {
					if (res.data.code == 1) {
						let datat = res.data.data;
				
						this.cwList = datat
						this.cwList.forEach((item, index) => {
							this.cwList[index].label = item.title
							this.cwList[index].value = item.id
						})
						this.cw = datat[0].id;
						this.cw_title = datat[0].title;
						this.getSpocList()
					}
				})
			},
			async getHistory() {
				await fetch('/api/shop/spoc_buylist', {
					page: this.page,
					rows: 20
				}, 'post').then(res => {
					if (res.data.code = 1) {
						// console.log('我zasd');
						if (res.data.data.list.length == 0) return;
						// console.log('我宰这里');
						if (this.page == 1) {
							this.historyList = res.data.data.list
						} else {
							this.historyList = this.historyList.concat(res.data.data.list)
						}
						this.page++
					}
				})
			},
			async getJl() {
				await fetch('/api/user/jl', {}, 'post').then(res => {
					if (res.data.code == 1) {
						this.ljjl = res.data.data.ljjl
						this.tabList = res.data.data.zd_type
					}
				})
			},
			getList() {

				this.showload = true;
				fetch('/api/shop/jhzcinfo', {}, 'post')
					.then(res => {
						this.showload = false;
						if (res.data.code) {
							this.curms = res.data.data
						}
					})
					.catch(error => {
						this.showload = false;
					})
			},
			reachBottom() {
				// console.log('撒大事');
				// this.loadStatus.splice(this.current,1,"loading")
				// setTimeout(() => {
				// 	this.loadStatus.splice(this.current,1,"暂无更多数据")
				// // 	this.getOrderList(this.current);
				// }, 1200);
				// }
				switch (this.current) {
					case 0:
						this.getHistory();
						break;
					case 1:
						this.getYjList()
						break;
					case 3:
						this.getJl();
						break;
					default:
						break;
				}


				// 此tab为空数据
				// if(this.current != 2) {
				// 	this.loadStatus.splice(this.current,1,"loading")
				// 	setTimeout(() => {
				// 		this.getOrderList(this.current);
				// 	}, 1200);
				// }
			},
			// 页面数据
			getOrderList(idx) {
				for (let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.dataList.length - 1);
					let data = JSON.parse(JSON.stringify(this.dataList[index]));
					data.id = this.$u.guid();
					this.orderList[idx].push(data);
				}
				this.loadStatus.splice(this.current, 1, "loadmore")
			},
			comfirm(e) {
				// console.log(e);
				if(e==1){
					this.isPolymerization=false;
				}else{
					this.isPolymerization=true
				}
				this.ReserveShow=false;
				// if(!this.getLoginInfo.paypwd){
				// 	this.showMess = true;
				// 	this.showpopule = false
				// 	this.message = this.getLangType=='chs'?'用户未设置交易密码':'用户未设置交易密码'
				// 	return
				// }
				if (this.isPolymerization==true) {
					// console.log('我是抢购 ');
					if (this.num == null || this.num == "" || this.num == 0){
						this.showTips('请输入正确的数量', 'error')
						return
					}
					// console.log(Number(this.curInfo.max_qg) , Number(this.curInfo.qg_sy_num),this.num);
					// if (Number(this.curInfo.max_qg) < Number(this.curInfo.qg_sy_num)) {
					// 	if (Number(this.num) > Number(this.curInfo.max_qg))  {
					// 		this.showTips('输入数量大于抢购最大数量，请重新输入', 'error')
					// 		return
					// 	}
					// } else {
					// 	if (Number(this.num) <= Number(this.curInfo.qg_sy_num)) {

					// 	} else {
					// 		console.log(312321312);
					// 		this.showTips('输入数量大于抢购剩余数量，请重新输入', 'error')
					// 		return
					// 	}
					// }
					// (typeIndex==0?jd_balance:yyc_balance) 
					let Numbert = this.typeIndex==0?this.jd_balance:this.yyc_balance
					// if (Number(this.num) > Number(Numbert)) {
					// this.showTips(this.typeIndex==0?'USDT可用余额不够':'预约额度不够', 'error')
					// return
					// }
					
				} else {
					
					// console.log('我是预约');
					if (this.numb == null || this.numb == "" || this.numb == 0){
						this.showTips('请输入正确的数量', 'error')
						return
					}
					// console.log(Number(this.numb), Number(this.yyInfo.yyed));
					if (Number(this.numb) > Number(this.yyInfo.balance)) {
						this.numb=''
					this.showTips('USDT可用余额不够', 'error')
					return
					}
					if (Number(this.numb) > Number(this.yyInfo.yyed)) {
						this.numb=''
					this.showTips('预约额度不够', 'error')
					return
					}
					
					if (Number(this.numb) > Number(this.yyInfo.max)) {
						this.numb=''
					this.showTips('数量超过最大预约数量，请重新输入', 'error')
					return
					}
				}
				this.showpopule = false;
				// this.showpwd = true;
				this.finish()
			},
			history(){
				uni.navigateTo({
					url:'./history'
				})
			},
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.price);
				});
				return price.toFixed(2);
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.number;
				});
				return num;
			},
			// tab栏切换
			change(index) {
				this.showpopule = false;
				this.isPolymerization = false;
				this.swiperCurrent = index;
				// this.getOrderList(index);
				switch (index) {
					case 0:
						this.page = 1;
						this.historyList = []
						this.getHistory();


						this.getCang()
						break;
					case 1:
						this.page = 1;
						this.historyList = []
						this.getYyInfo()
						break;
					case 2:
						this.getJl();
						break;
				}
			},
			async getSpocList() {
				this.djs_status = false
				this.djs=0
				this.hour = '0'
				this.minute = '0'
				this.second = '0'
				this.warehouseList = [];
				await fetch('/api/shop/spockj_list', {
					cw: this.cw
				}, 'post').then(res => {
					if (res.data.code == 1) {
						this.djs = res.data.data.djs
						 this.rq = res.data.data.rq
						 this.cyrs = res.data.data.cyrs
						this.jd_balance = res.data.data.db1_balance
						this.yyc_balance = res.data.data.yyc_balance
						this.warehouseList = res.data.data.list
						this.warehouseList.forEach((item,index)=>{
							this.warehouseList[index].params = Number((Number(item.cyed )/Number(item.bqed)*100).toFixed(2))?((Number(item.cyed )/Number(item.bqed)*100).toFixed(2)):0
							
							this.warehouseList[index].syparams = Number(Number(item.qg_sy_num)/Number(item.qg_all_num)*100).toFixed(2)	
							
						})
						this.shopid = this.warehouseList[0].id
						 // this.warehouseList[0].djs=15
						this.djs_status = this.warehouseList[0].djs?true:false
						this.timerPut(this.warehouseList[0].djs)
						
					}
				})
			},
			timerPut(time){
				if(!this.djs_status)return;
				// if()
				// return
				 if (time > 0) {
				        this.hour = Math.floor((time / 3600) % 24)
				        this.minute = Math.floor((time / 60) % 60)
				        this.second = Math.floor(time % 60)
				        this.countDowm()
				      }else{
						  console.log('111');
						  clearInterval(this.timer)
						  
					  }
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			showTips(msg, type) {
				// <!-- type值可选的有primary(默认)、success、info、warning、error -->
				this.$refs.message.type = type
				this.$refs.message.show({
					title: msg
				});
			},
			close(val) {
				if (val == 1) {
					this.isshows = false;
					this.showss = false;
					this.showpwd = false;
				} else {
					this.isshows = val;
					this.showpwd = val;
					this.showss = val
				}
			},
			inputAgain(val) {
				this.isshows = false;
				this.showpwd = true;
			},
			finish(val) {
				let data, url;
				if (this.isPolymerization) {
					data = {
						num: this.num,
						paypwd: val,
						shopid: this.curInfo.id,
						zf_type:Number(this.typeIndex)+1
					}
					url = '/api/shop/spoc_buy'
				} else {
					data = {
						shopid:this.shopid,
						num: this.numb,
						paypwd: val,
					}
					url = '/api/shop/spoc_yy'
				}
				// console.log(data);return
				if (this.isCheck) return
				this.isCheck = true;
				// console.log(data, url, '我在这里');
				// this.laoding = true;
				fetch(url, data, 'POST').then(res => {
					// console.log(res, '我进这里了吗');
					// this.laoding = false;
					this.isCheck = false;
					// showToast(res.data.msg)
					if (res.data.code == 1) {
						this.showTips(res.data.msg, 'success')
						this.isshows = false;
						this.showss = false;
						this.showpwd = false;
						this.num = 1;
						this.numb = ''
						this.page = 1;
						this.typeIndex = 0
						this.historyList = []
						if (this.isPolymerization) {
							this.getSpocList()
						} else {
							
							this.getSpocList()
						}
					} else {
						this.isshows = false;
						this.showss = false;
						this.showpwd = false;
						this.showTips(res.data.msg, 'error')
						if (res.data.msg == '支付密码错误！') {
							this.isshows = true;
						} else if (res.data.msg == 'usdt不足') {
							this.isshows = false;
							this.showpwd = false;
							this.showss = true;
						} else {
							this.showTips(res.data.msg, 'error')
							this.num = 1;
							this.numb = ''
						}
					}
				}).catch(error => {
					this.isCheck = false;
					// this.laoding = false;
				})
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			Ainput1(e) {
				e.detail.value[0] = (e.detail.value[0].match(/^\d+$/)) || null
				//重新赋值给input
				this.$nextTick(() => {
					// console.log(e);
					this.numb = e.detail.value[0]
				})


				// 	const v = e.detail.value
				// 		this.number = '1'

				// 		const zero = /^(0{2,})|[^0-9]/g
				// 		let final = 0
				// 		if (!v) {
				// 		  final = 0
				// 		} else {
				// 		  final = v.toString().replace(zero, (v) => {
				// 			return 0
				// 		  })

				// 		  if (final.split('')[0] * 1 === 0) {
				// 			final = final.slice(1) - 0 || 0
				// 		  }
				// 		}
				// 		this.$nextTick(() => {
				// 		  this.number = final.toString() || '0'
				// 		})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.polymeric-nav{
		background: rgba($color: #21242D, $alpha: .7);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 50rpx  auto ;
		.polymeric-nav-item{
			width: 134rpx;
			line-height: 66rpx;
			height: 66rpx;
			text-align: center;
			border-radius: 8rpx;
			color: $white;
			font-size: 28rpx;
			&.active{
				color: #F4C154;
				background: #2C303D;
				box-shadow: 0 6rpx 12rpx 2rpx rgba($color: #000000, $alpha: .48);
			}
		}
	}
	.polymeric-contant{
		background: linear-gradient(to bottom ,#2F3748, #111827);
		height: 90vh;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: relative;
		.polymeric-bg{
			width: 750rpx;
			height: 436rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1;
		}
		.polymeric-contant-c{
			height: 90vh;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			height: 90vh;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			z-index: 4;
		}
	}
	.popu-buy{
		background: $white;
		border-radius: 20rpx;
		color: #666;
		width:500rpx;
		&.popu-buy-other{
			width:600rpx;
			position: relative;
			.popule-close{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}
			}
		}
		.popu-buy-content{
			padding: 0 30rpx;
			.popule-item{
				
				border: 1rpx solid #e7eaf4;
				padding: 0 20rpx;
				input{
					height: 88rpx;
					line-height: 88rpx;
				}
			}
		}
		&.popu-buy-other{
			max-height: 650rpx;
			position:relative;
		}
		.close-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index:999;
		}
		.popu-buy-t{
			// line-height: 100rpx;
			margin:30rpx 0;
			border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			padding: 50rpx 100rpx 0;
			word-wrap:break-word;
		}
		.popu-buy-ti{
			padding: 50rpx 0 0;
			margin:30rpx 0;
			// border-bottom: 1rpx solid #e7eaf4;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
		}
		.popu-buy-p{
			padding: 30rpx 40rpx;
			.p{
				word-wrap:break-word;
				width: 500rpx;
				font-size: 28rpx;
			}
		}
		.popu-buy-c{
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.popu-buy-b{
			word-wrap:wrap;
			padding: 30rpx 40rpx;
			display: flex;
			align-items: center;
			
			button{
				flex: 1;
				border-radius: 8rpx;
				color: #666;
				line-height: 88rpx;
				height: 88rpx;
				font-size: 28rpx;
				background: #f3f5f6;
				&:first-of-type{
					margin-right: 40rpx;
					color: #666;
				}
				&:last-of-type{
					color: #fff;
					background: #334bf3;
				}
			}
			&.popu-buy-b-other{
				button{
					&:first-of-type{
						margin-right: 0;
						// color: #666;
					}
				}
				
			}
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		image{
			width: 40rpx;
			height: 30rpx;
		}
	}
	.menu-right{
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #A7AEBE;
	}
	.nav-conte{
		width: 530rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: #21242D;
		.nav-log{
			// border: 1rpx solid #fff;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			image{
				width: 105rpx;
				height: 104rpx;
				border-radius: 50rpx;
			}
		}
		.nav-address{
			font-size: 28rpx;
			color: #777D8A;
			margin-bottom: 82rpx;
		}
		.nav-item{
			&.active{
				color: #F5C249;
				i{
					color:#F5C249;
				}
			}
			// width: 400rpx;
			// padding: 0 30rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 60rpx;
			margin-bottom: 48rpx;
			.nav-item-l{
				display: flex;
				align-items: center;
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight:100;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}
			
		}
	}
	.popule-index-content-msg{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 5;
		background: rgba($color: #000000, $alpha: .8);
		.popule-index-content-msg-content{
			width: 690rpx;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			z-index: 6;
			// background: #1E1F2C;
		}
	}
	.wrap{
		position: relative;
		&::after{
			width: 750rpx;
			height: 100vh;
			background: #f3f5f6;
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: -3;
		}
	}
	.nav-nax-right{
		color: $white;
		font-size: 30rpx;
		padding-right: 30rpx;
	}
	.polymeric-history{
		padding: 0 36rpx;
		font-size: 28rpx;
		color: #F5C249;
		display: flex;
		justify-content: flex-end;
		line-height: 96rpx;
	}
	.polymeric-top{
		position: relative;
		width: 690rpx;
		height:482rpx;
		margin: 46rpx auto 0;
		.polymeric-top-bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 690rpx;
			height:482rpx;
			z-index: -1;
		}
		.polymeric-top-t{
			padding-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.polymeric-top-t-l{
				width: 146rpx;
				height: 146rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 146rpx;
					height: 146rpx;
					position: absolute;
					left: 0;
					top: 0;
				}
				text{
					position: absolute;
					// left: 0;
					top: 0;
					left: 50%;
					// top: 50%;
					transform: translate(-50%,0);
					z-index: 2;
					line-height: 146rpx;
					font-size: 70rpx;
					color: #16171D;
				}
			}
			.polymeric-top-t-ll{
				margin: 0 -10rpx;
				display: flex;
				color: $white;
				align-items: center;
				justify-content: center;
				width: 72rpx;
				font-size: 72rpx;
			}
		}
		.polymeric-top-t-tips{
			font-size: 30rpx;
			color: $white;
			font-weight: bold;
			line-height: 86rpx;
			text-align: center;
			margin: 0 34rpx;
			// border-bottom: 1rpx solid #E7EAF4;
		}
		.participate-content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:40rpx;
			color: $white;
			font-size: 28rpx;
		}
		.polymeric-top-bottom{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 54rpx;
			button{
				width: 100%;
				height: 108rpx;
				line-height: 108rpx;
				color: $white;
				text-align: center;
				position: relative;
				background: #F5C249;
				font-size: 34rpx;
				padding: 0;
				margin: 0;
				border: none;
				overflow: inherit;
				&::after{
					display: none;
				}
			}
		}
	}
	.incubation-list{
		padding: 80rpx 12rpx 60rpx;
		.incubation-list-i{
			position: relative;
			// width: 640rpx;
			// height: 142rpx;
			padding: 22rpx 30rpx 48rpx;
			margin-bottom: 40rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background: linear-gradient(to right, #1D2434, #1D180F);
			.list-status{
				text-align: right;
				color: $white;
				font-size: 26rpx;
				padding:20rpx 0;
			}
			.incubation-list-i-content{
				.incubation-list-i-content-t{
					// padding: 40rpx 0;
					font-size: 28rpx;
					color: $white;
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 34rpx;
					margin-bottom: 20rpx;
					
				}
				.incubation-list-i-content-c{
					display: flex;
					align-items: center;
					// width: 280rpx;
					position: relative;
					.incubation-list-i-content-c-tips{
						position: absolute;
						right: 20rpx;
						top: 0;
						transform: translateY(-50%);
						font-size: 28rpx;
						font-weight: bold;
						z-index: 1;
						color: $white;
						background:rgba($color: green, $alpha: .8);
						width: 120rpx;
						height: 56rpx;
						border-radius: 8rpx;
						line-height: 56rpx;
						text-align: center;
						&.color2{
							background:rgba($color: #808080, $alpha: .8);
						}
					}
					.incubation-list-i-content-c-l{
						// width: 228rpx;
						flex: 1;
						position: relative;
						image{
							position: absolute;
							top: 42%;
							transform: translateY(-50%);
							width: 36rpx;
							height: 36rpx;
							z-index: 3;
						}
					}
					text{
						font-size: 20rpx;
						color: #9EA4BA;
						margin-left: 30rpx;
					}
				}
			}
		}
	}
	
	
	.popule-index-content{
		width: 690rpx;
		position: relative;
		border-radius: 20rpx;
		padding: 70rpx 42rpx 60rpx;
		background: #1E1F2C;
		.clost-icon{
			position: absolute;
			right:18rpx;
			font-size: 26rpx;
			top: 22rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		.popule-index-content-c-ll{
			font-size: 32rpx;
			color: $white;
			font-weight: bold;
			margin: 15rpx 0 ;
			line-height: 44rpx;
		}
		.popule-index-content-t{
			line-height: 120rpx;
			font-size: 36rpx;
			color: #101C10;
			font-weight: bold;
			text-align: center;
		}
		.popule-text-conent{
			padding-bottom: 20rpx;
			font-size: 28rpx;
			color: #808080;
		}
		.popule-percent{
			display: flex;
			align-items: center;
			padding-top: 40rpx;
			.popule-percent-l{
				flex: 1;
			}
			text{
				display: block;
				width: 160rpx;
				font-size: 28rpx;
				color: #808080;
				text-align: center;
			}
		}
		.popule-index-content-c{
			background: #282A3D;
			padding: 30rpx 32rpx ;
			.popule-index-content-c-l{
				// &:nth-child(3){
				// 	padding: 40rpx 0;
				// }
				color:#777D8A;
				font-size: 28rpx;
				line-height: 54rpx;
				text{
					color: $white;
					font-size: 30rpx;
					// font-weight: bold;
				}
			}
		}
		.popule-input-item{
			padding: 48rpx 0 54rpx;
			.popule-input-item-t{
				font-size: 34rpx;
				margin-bottom: 34rpx;
				color: $white;
				line-height: 48rpx;
			}
			.popule-input-item-c{
				background: #384156;
				border-radius: 10rpx;
				display: flex;
				padding: 0 28rpx;
				align-items: center;
				input{
					width: 100%;
					line-height: 92rpx;
					height: 92rpx;
					color: $white;
				}
			}
			
		}
		.popule-botton{
			button{
				width: 100%;
				height: 108rpx;
				line-height: 108rpx;
				border-radius: 16rpx;
				color: $white;
				background: #F5C249;
				font-size: 34rpx;
				padding: 0;
				border: none;
				&::after{
					display: none;
				}
			}
		}
	}
	
	
	
	
	
	
	
	.assets-top{
		position: fixed;
		left: 50%;
		top: 0;
		z-index: -2;
		transform: translateX(-50%);
		width: 823rpx;
		height: 291rpx;
		flex-shrink: 0;
	}
	.list {
		margin-top: 20rpx;

		// margin: 40upx 30upx 0;
		// margin-right: 10rpx;
		.list-item {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 152upx;
			margin-bottom: 20upx;
			border-radius: 10upx;
			padding: 40rpx 30rpx;
			// background-image: url(../../static/imgs/qutation-bg2.png);
			background-size: cover;
			// margin-right: 10rpx;
			border-bottom: 1rpx solid #edf1f4;

			// &:last-child{
			// 	border-bottom:none;
			// }
			.list-item-i {
				flex: 1;

				&:last-child {
					text-align: right;
				}

				.list-item-i-b-t {
					text {
						display: block;
						font-size: 24rpx;
						color: #8f9ba9;
						display: block;
						line-height: 36rpx;
					}
				}

				.list-item-i-b {
					font-weight: bold;
					// font-size: 30rpx;
					// color: #022347;
					// margin-bottom: 10rpx;

					margin-bottom: 10rpx;
					// margin: 0;
					font-size: 32rpx;
					line-height: 48rpx;
					display: block;
					color: #022347;
				}

				.status {
					margin-top: 10rpx;
					font-size: 26rpx;
				}

				text {
					display: block;
					font-size: 28rpx;
					color: #8f9ba9;
					line-height: 36rpx;
					// color: $white;
				}

				.item-t {
					overflow: hidden;
					display: flex;
					align-items: center;

					image {
						width: 48upx;
						height: 48upx;
						margin-right: 30upx;
					}

					.item-h {
						text {
							display: block;
							font-size: 24rpx;
							color: #8f9ba9;
							display: block;
							line-height: 36rpx;
						}

						.item-h-text {
							margin-bottom: 16rpx;
							// margin: 0;
							font-size: 28rpx;
							line-height: 42rpx;
							display: block;
							color: #022347;
							display: flex;
							align-items: center;
							text{
								margin-right: 6rpx;
								font-size: 30rpx;
								color: $theme-color;
							}
						}
					}
				}
			}
		}
	}

	.popule-metexts {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);

		.popule-content {
			width: 750upx;
			position: fixed;
			z-index: 9;
			left: 0;
			bottom: 0;
			padding: 60upx 60upx 40upx;
			background-color: $white;
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;

			.popule-list {
				padding-bottom: 40upx;

				// border-bottom: 1upx solid $split-line-color1;
				view {
					font-size: 36upx;
					font-weight: bold;
					padding-bottom: 25upx;
					color: $black;
				}

				text {
					font-size: 26upx;
					color: $text-gray-color1;
				}

				&.popule-list-lac {
					text {
						font-size: 30rpx;
						color: $black;
					}
				}
			}

			.popule-list-real {
				padding: 20upx 0 10upx;

				text {
					font-size: 26upx;
					color: $text-gray-color1;
				}

				view {
					margin-top: 10upx;
					font-size: 46upx;
					font-weight: bold;
					color: $white;
				}
			}

			.list {
				padding: 20upx 0 0;
				color: $black;

				&:last-of-type {
					.input-item {
						border-bottom: none;
					}
				}

				.title {
					font-size: 30upx;
					color: $black;
					background: #1d184f;
				}

				.input-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1upx solid $split-line-color2;

					input {
						line-height: 88upx;
						height: 88upx;
						font-size: 28upx;
					}

					text {
						font-size: 28upx;
					}
				}
			}

			.popule-num-content {
				padding-bottom: 80rpx;

				text {
					font-size: 26upx;
					color: $text-gray-color1;
				}

				.popule-num {
					margin-top: 15upx;
					display: flex;
					// justify-content: space-between;
					// align-items: center;
					width: 475upx;
					line-height: 80rpx;
					height: 80rpx;
					border: 1upx solid #D1D1D1;
					border-radius: 8upx;
					overflow: hidden;

					button {
						&:first-of-type {
							border-right: 4upx solid $black;
						}

						&:last-of-type {
							border-left: 4upx solid $black;
						}

						&.active {
							background: #C5C5C5;
							color: $text-gray-color1;
						}

						font-size: 60upx;
						border-radius: 0;
						width: 80rpx;
						height: 80rpx;
						color: $black;
						line-height: 74upx;
						text-align: center;
						font-weight: normal;
						background-color: $white;
					}

					input {
						padding: 0 20rpx;
						font-size: 40upx;
						font-weight: normal;
						flex: 1;
						line-height: 80rpx;
						color: $black;
						height: 80rpx;
						// text-align: center;
					}
				}
			}

			.popule-voucher {
				padding: 30upx 0;

				text {
					font-size: 26upx;
					color: $text-gray-color1;
				}

				.popule-voucher-content {
					border-radius: 8upx;
					margin-top: 22rpx;
					background: $button-color;
					padding: 16upx 40upx;
					font-size: 36upx;
					font-weight: normal;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $black;

					view {
						font-weight: bold;
					}

					text {
						color: $black;
						font-size: 36upx;
						font-weight: bold;
					}
				}
			}
			.popule-type{
				padding: 20upx 0;
				color: $black;
				text {
					font-size: 26upx;
					color: $black;
				}
				.popule-type-c{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					.popule-type-li{
						padding: 10rpx 20rpx;
						display: flex;
						align-items: center;
						&.avtive{
							color: $theme-color;
							.icon{
								color: $theme-color !important;
							}
						}
						.icon{
							font-size: 30rpx;
							margin-right: 10rpx;
						}
						
					}
				}
			}
			.popule-meg {
				padding: 20upx 0;
				color: $black;

				text {
					font-size: 26upx;
					color: $black;
					margin-bottom: 10rpx;
					display: block;
				}
			}

			.popule-nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10upx 0 0;

				view {
					flex: 1;
					text-align: center;

					&:first-of-type {
						button {
							background: #C5C5C5;
						}
					}

					&:last-of-type {
						button {
							background: $theme-color;
						}
					}

					button {
						width: 240upx;
						line-height: 72upx;
						height: 72upx;
						text-align: center;
						color: $white;
						font-size: 34upx;
						font-weight: bold;

						&.active {
							background: #C5C5C5;
							color: #0F0C39;
						}
					}
				}
			}
		}
	}

	.page-box0 {
		background: $white;
		margin-top: 20rpx;
		padding-top: 20rpx;

		.assets-head {
			margin: 10rpx 30rpx 40rpx;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #ff9368, #ff966c);
			box-shadow: 0 0 20rpx rgba($color: #ff9368, $alpha: 0.5);
			padding: 50rpx 0 52rpx 42rpx;

			.assets-head-t {
				text {
					font-size: 24rpx;
					color: $white;
				}

				view {
					margin-top: 22rpx;
					font-size: 56rpx;
					color: $white;
				}
			}

			.assets-head-b {
				padding-top: 48rpx;
				display: flex;
				align-items: center;

				.assets-head-b-l {
					flex: 1;
					color: rgba($color: #ffffff, $alpha: 0.7);
					font-size: 24rpx;
				}
			}

		}

		.assets-nav {
			display: flex;
			align-items: center;

			.assets-nav-l {
				text-align: center;
				flex: 1;
				padding: 20rpx 0 60rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					flex-shrink: 0;
					margin-bottom: 12rpx;
				}

				text {
					display: block;
					color: #262631;
					font-size: 24rpx;
				}
			}
		}



	}

	.asset-data {
		margin-top: 20rpx;
		background: $white;

		.asser-data-t {
			line-height: 92rpx;
			padding-left: 43rpx;
			position: relative;

			&::after {
				position: absolute;
				content: "";
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 30rpx;
				background: #FF804E;
				border-top-right-radius: 4rpx;
				border-top-left-radius: 4rpx;
				border-bottom-right-radius: 4rpx;
				border-bottom-left-radius: 4rpx;
			}
		}

		.asser-data-c {
			padding-bottom: 34rpx;

			.asser-data-c-l {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 26rpx;
				border-bottom: 1rpx solid #EBEBEB;

				.asser-data-c-l-l {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						flex-shrink: 0;
						margin-right: 16rpx;
					}

					text {
						font-size: 26rpx;
						color: 累计充值;
					}
				}

				.asser-data-c-l-r {
					text-align: right;

					view {
						color: #262631;
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 14rpx;
					}

					text {
						font-size: 24rpx;
						color: #D0D0D0;
					}
				}
			}
		}
	}

	.page-box-2-title {
		display: flex;
		align-items: center;
		// margin-top: 50rpx;
		padding: 36rpx 30rpx 40rpx;
		color: #262631;
		font-size: 24rpx;
		position: relative;
		&.page-box-2-title-other-class{
			display: flex;
			// align-items: center;
			justify-content: flex-start;
			font-size: 30rpx;
			color: $white;
			font-weight: bold;
		}
		.popule-cw {
			position: absolute;
			left: 30rpx;
			top: 80rpx;
			background: $white;
			padding: 10rpx 15rpx;
			border-radius: 10rpx;
			z-index: 100000;
			box-shadow: 0 16rpx 20rpx rgba($color: #000000, $alpha: 0.1);
			color: #262631;
			.popule-cw-li {
				padding: 0 20rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #efefef;

				&.active {
					color: $theme-color;
				}

				&:last-of-type {
					border-bottom: none;
				}
			}
		}

		i {
			font-size: 30rpx;
		}
	}

	.page-box-2 {
		padding: 0 30rpx;

		.page-box-2-con {
			background: $white;
			border-radius: 20rpx;
			padding: 0 40rpx;

			.page-box-2-con-title {
				line-height: 100rpx;
				color: #FF804E;
				font-size: 30rpx;
				font-weight: bold;
			}

			.page-box-2-con-c {
				background-color: #fbfbfb;
				border-radius: 26rpx;
				padding: 0 0 68rpx 18rpx;

				.page-box-2-con-c-t {
					line-height: 100rpx;
					padding: 0 0 0 32rpx;
					font-size: 24rpx;
					color: #262631;
					font-weight: bold;
				}

				.page-box-2-con-c-c {
					display: flex;
					align-items: center;

					.page-box-2-con-c-c-l {
						width: 234rpx;
						height: 234rpx;

						.u-progress-content {
							text-align: center;

							.u-progress-info {
								font-size: 22rpx;
								color: #666668;
							}

							.u-progress-dot {
								font-size: 30rpx;
								color: #FF804E;
							}
						}
					}

					.page-box-2-con-c-c-r {
						padding-left: 42rpx;

						view {
							font-size: 26rpx;
							color: #262631;
							padding: 24rpx 0;
						}
					}
				}

			}

			.page-box-2-con-c-b {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.page-box-2-con-c-b-l {
					padding: 34rpx 0 44rpx;
					flex: 1;

					view {
						font-size: 24rpx;
						color: #262631;

						&:first-of-type {
							margin-bottom: 24rpx;
						}
					}
				}

				button {
					width: 200rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 34rpx;
					background: linear-gradient(to bottom, #ff804e, #ff804e);
					box-shadow: 0 0 20rpx rgba($color: #ff804e, $alpha: 0.5);
					color: $white;
					font-size: 26rpx;
					padding: 0;
					&.end-class{
						background: #DFDFDF !important;
						box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
					}
				}
			}
		}
	}

	.Reserve-content {
		background: $white;
		border-radius: 10rpx;
		padding: 0 24rpx;
		margin: 0 30rpx;

		.Reserve-content-t {
			line-height: 72rpx;
			font-size: 30rpx;
			color: #FF804E;
			font-weight: bold;
		}

		.Reserve-content-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #d8d8d8;

			input {
				flex: 1;
				line-height: 120rpx;
				height: 120rpx;
				border: none;
				font-size: 40rpx;
				font-size: bold;

				&::after {
					display: none;
				}
			}

			button {
				width: 80rpx;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0;
				background: $white;
				border: 1rpx solid #f5f5f5;
				border-radius: 6rpx;
				font-size: 26rpx;
				color: #6F6F6F;
				text-align: center;
			}
		}

		.Reserve-content-b {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 6rpx 0 48rpx;

			.Reserve-content-b-l {
				font-size: 24rpx;
				color: #808080;
				width: 50%;
				padding: 24rpx 0 0;
			}
		}
	}

	.Reserve-content-button {
		margin: 80rpx 30rpx 92rpx;

		button {
			line-height: 88rpx;
			height: 88rpx;
			color: $white;
			background: #FF8555;
			border-radius: 44rpx;
			color: #F2F2F2;
			font-size: 30rpx;
		}
	}

	.Reserve-content-history {
		padding: 0 30rpx;

		.Reserve-content-history-t {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Reserve-content-history-t-l {
				font-size: 30rpx;
				color: #262631;
				padding: 16rpx;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 4rpx;
					height: 30rpx;
					background-color: #FF804E;
					border-top-left-radius: 4rpx;
					border-top-right-radius: 4rpx;
					border-bottom-left-radius: 4rpx;
					border-bottom-right-radius: 4rpx;
					transform: translateY(-50%);
				}
			}

			.Reserve-content-history-t-r {
				display: flex;
				align-items: center;
				color: #262631;
				font-size: 24rpx;

				i {
					font-size: 30rpx;
				}
			}
		}

	}

	.award {
		margin-top: 20rpx;
		background: $white;
		padding-top: 20rpx;

		.award-content {
			padding: 40rpx 0 66rpx 24rpx;
			margin: 0 30rpx;
			background-color: #ff9d76;
			box-shadow: 0 10rpx 20rpx rgba($color: #ff9d76, $alpha: 0.5);
			border-radius: 20rpx;
			color: $white;

			text {
				font-size: 24rpx;

			}

			view {
				font-size: 56rpx;
				font-weight: bold;
				margin-top: 22rpx;
			}
		}

		.award-data {
			.award-data-t {
				line-height: 118rpx;
				position: relative;
				padding-left: 46rpx;

				&::after {
					content: "";
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 4rpx;
					height: 30rpx;
					background: #FF804E;
					border-top-left-radius: 4rpx;
					border-top-right-radius: 4rpx;
					border-bottom-left-radius: 4rpx;
					border-bottom-right-radius: 4rpx;
				}
			}

			.award-data-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ececec;
				padding: 46rpx 32rpx 46rpx 28rpx;

				&:last-of-type {
					border-bottom: none;
				}

				.award-data-li-l {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 22rpx;
					}

					text {
						font-size: 26rpx;
						font-weight: bold;
						color: #262631;
					}
				}

				.award-data-li-r {
					display: flex;
					align-items: center;

					.award-data-li-r-l {
						view {
							text-align: right;
							color: #262631;
							font-size: 36rpx;
							font-weight: bold;
							margin-bottom: 12rpx;
						}

						text {
							color: #979797;
							font-size: 24rpx;
						}

					}

					.icon {
						font-size: 48rpx;
						color: #262631;
					}
				}
			}

		}



	}



	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.u-tabs-box {
		width: 750rpx;
	}
</style>
